<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!-- Content Header (Page header) -->
<section class="content-header" style="">
    <h1>
        ${archives.comName}
        <small>资料上传</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
        <li><a href="#">资料上传</a></li>
        <li class="active">${archives.comName}</li>
    </ol>
</section>

<!-- Main content -->
<section class="content">
    <ul class="nav nav-tabs">
        <shiro:lacksRole name="admin">
            <li><a href="#" onclick="loadHref('#dormant')">休眠户</a></li>
        </shiro:lacksRole>

        <li class="active"><a href="#">资料上传</a></li>
    </ul>
    <div class="box">
        <div class="box-body">
            <div class="col-xs-12 col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-heading">企业详情信息</div>
                    <div class="panel-body">
                        <div class="col-md-5">
                            <ul>
                                <li>企业类别：${archives.comTypeSTR}</li>
                                <li>状态：${archives.statusSTR}</li>
                                <li>业务类型：${archives.businessTypeSTR}</li>
                                <li>录入时间：${archives.inputTimeSTR}</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <form id="detailCompany">

                                <input type="hidden" name="id" id="dormanyId" class="form-control" value="${archives.id}">

                                <div class="input-group col-xs-5">
                                    <span class="input-group-addon">企业名称</span>
                                    <input type="text" name="comName" class="form-control" value="${archives.comName}"
                                           required>
                                </div>
                                <div class="input-group col-xs-5">
                                    <span class="input-group-addon">营业执照编号</span>
                                    <input type="text" name="businessCode" class="form-control"
                                           value="${archives.businessCode}" required>
                                </div>
                                <div class="input-group col-xs-5">
                                    <span class="input-group-addon">授信额度</span>
                                    <input type="number" name="creditLine" class="form-control"
                                           value="${archives.creditLine}" required>
                                </div>
                                <div class="input-group col-xs-5">
                                    <span class="input-group-addon">授信期限(年)</span>
                                    <select class="form-control" id="creditLimit_select" name="creditLimit">
                                        <option value="${archives.creditLimit}"
                                                selected>${archives.creditLimit}</option>
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                    </select>
                                </div>
                            </form>
                            </br>
                            <c:if test="${archives.dormant ==3}">
                                <button type="button" class="btn btn-primary" id="editCompany_ID">修改</button>
                                <button type="button" class="btn btn-primary" id="saveCompany_ID">保存</button>
                            </c:if>
                        </div>
                        <c:forEach items="${archives.tbCompayUploadInfos}" var="tbCompayUploadInfo">
                            <c:if test="${tbCompayUploadInfo.isDisplay==1}">
                            <div class="col-sm-2" id="imageList1">
                                <c:choose>
                                    <c:when test="${fn:containsIgnoreCase(tbCompayUploadInfo.picUrl, '.png')||fn:containsIgnoreCase(tbCompayUploadInfo.picUrl, '.jpg')||fn:containsIgnoreCase(tbCompayUploadInfo.picUrl, '.jpeg')||fn:containsIgnoreCase(tbCompayUploadInfo.picUrl, '.gif')||fn:containsIgnoreCase(tbCompayUploadInfo.picUrl, '.bmp')}">
                                        <div class="images" style="width:114px; height:210px;">
                                            <img src=${tbCompayUploadInfo.picUrl}
                                                         style="width: 110px; height: 110px;">
                                            <br>
                                            <label>${tbCompayUploadInfo.picName}</label><br>
                                            <a href="javascript:updateImage(${tbCompayUploadInfo.id})">修改</a>
                                            <a href="#" onclick='showhtfun("${tbCompayUploadInfo.picUrl}")'>下载</a>
                                        </div>
                                    </c:when>
                                    <c:when test="${empty tbCompayUploadInfo.picUrl}">
                                        <div class="images" style="width:114px; height:210px;">

                                            <br>
                                            <label>${tbCompayUploadInfo.picName}</label><br>
                                            <a href="javascript:updateImage(${tbCompayUploadInfo.id})">上传图片</a>
                                        </div>
                                    </c:when>
                                    <c:otherwise>
                                        <div class="images" style="width:114px; height:210px;">
                                            <a target="_blank" href=${tbCompayUploadInfo.picUrl}>下载</a>
                                            <br>
                                            <label>${tbCompayUploadInfo.picName}</label><br>
                                            <a href="javascript:updateImage(${tbCompayUploadInfo.id})">修改</a>
                                        </div>
                                    </c:otherwise>
                                </c:choose>

                            </div>
                            </c:if>
                        </c:forEach>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12">
                <%--担保方--%>
                <c:forEach items="${archivesGuarantees}" var="guarantees">
                    <div class="panel panel-default">
                        <div class="panel-heading">担保企业详情信息</div>
                        <div class="panel-body">
                            <div class="col-md-5">
                                <ul>
                                    <li>类别：${guarantees.comTypeSTR}</li>
                                    <li>录入时间：${guarantees.inputTimeSTR}</li>
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <form id="detailG">
                                    <input type="hidden" name="id" class="form-control" value="${guarantees.id}">

                                    <div class="input-group col-xs-5">
                                        <span class="input-group-addon">担保人名称</span>
                                        <input type="text" name="comName" class="form-control"
                                               value="${guarantees.comName}"
                                               required>
                                    </div>
                                    <div class="input-group col-xs-5">
                                        <span class="input-group-addon">担保金额</span>
                                        <input type="text" name="creditLine" class="form-control"
                                               value="${guarantees.creditLine}" required>
                                    </div>
                                        <%--<c:if test="${guarantees.dormant ==3}">
                                            <button type="button" class="btn btn-primary" id="editDetail_ID">修改</button>
                                            <button type="button" class="btn btn-primary" id="saveDetail_ID">保存</button>
                                        </c:if>--%>
                                    <button type="button" class="btn btn-primary" id="editDetail_ID">修改</button>
                                    <button type="button" class="btn btn-primary" id="saveDetail_ID">保存</button>
                                </form>
                            </div>

                            <c:forEach items="${guarantees.tbCompayUploadInfos}" var="uploadInfo">
                                <c:if test="${uploadInfo.isDisplay==1}">
                                <div class="col-sm-2" id="imageList1">
                                    <c:choose>
                                        <c:when test="${fn:containsIgnoreCase(uploadInfo.picUrl, '.png')||fn:containsIgnoreCase(uploadInfo.picUrl, '.jpg')||fn:containsIgnoreCase(uploadInfo.picUrl, '.jpeg')||fn:containsIgnoreCase(uploadInfo.picUrl, '.gif')||fn:containsIgnoreCase(uploadInfo.picUrl, '.bmp')}">
                                            <div class="images" style="width:114px; height:210px;">
                                                <img src=${uploadInfo.picUrl}
                                                             style="width: 110px; height: 110px;"></img>
                                                <br>
                                                <label>${uploadInfo.picName}</label>
                                                <br>
                                                <a href="javascript:updateImage(${uploadInfo.id})">修改</a>
                                                <a href="#" onclick='showhtfun("${uploadInfo.picUrl}")'>下载</a>
                                            </div>
                                        </c:when>
                                        <c:when test="${empty uploadInfo.picUrl}">
                                            <div class="images" style="width:114px; height:210px;">

                                                <br>
                                                <label>${uploadInfo.picName}</label>
                                                <br>
                                                <a href="javascript:updateImage(${uploadInfo.id})">上传图片</a>
                                            </div>
                                        </c:when>
                                        <c:otherwise>
                                            <div class="images" style="width:114px; height:210px;">
                                                <a target="_blank" href=${uploadInfo.picUrl}>下载</a>
                                                <br>
                                                <label>${uploadInfo.picName}</label>
                                                <br>
                                                <a href="javascript:updateImage(${uploadInfo.id})">修改</a>
                                            </div>
                                        </c:otherwise>
                                    </c:choose>
                                </div>
                                </c:if>
                            </c:forEach>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>
    </div>
</section>

<div id="img-modal" class="modal fade">
    <div id="img-dialog" class="modal-dialog" style="width: 98%; height: 98%;text-align: center;">
        <div id="img-content" class="modal-content">
            <img id="img-zoom" src="" style="max-height: 100%; max-width: 100%;margin:10px;">
        </div>
    </div>
</div>

<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="editModalLabel">证件照片信息</h4>
            </div>
            <div class="modal-body">
                <form id="updateForm" enctype="multipart/form-data">
                    <input type="hidden" name="uploadId" id="upload_id"/>

                    <div class="form-group">
                        <label class="control-label"><span class="asterisk">*</span>上传图片:</label>
                        <input id="input-id1" name="input-id1" type="file" data-show-caption="true">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" form="updateForm" class="btn btn-primary" id="updateImage" data-dismiss="modal">确定</button>
            </div>
            <div id="J_progress_label" style="display: none;position: absolute;width: 200px;height: 60px;text-align: center;line-height: 60px;top: 0;left: 0;right: 0;bottom: 0;border-radius:15px;margin: auto;box-shadow:0px 0px 5px #e5f9f2;background:#f63;z-index:999;color:white;">

            </div>
        </div>
    </div>
</div>

<script>

    $(function () {
        var inputidnum = 31;
        $('.panel').on('click', '.ht_in_jia', function () {
            inputidnum++;
            var thisid = "input-id" + inputidnum;
            var thisidLabel = "input-id" + inputidnum + "Label";

            $('.panel').on('input propertychange', '.inputtitle', function () {
                $(this).parent().next('label').html('用户新增' + $(this).val());
            });


            $(this).parents('.form-group').append('<div class="form-group">' +
            '<span class="formspan col-sm-6">标题：<input type="text" name="" class="inputtitle"/></span><label for="' + thisid + '" class="col-sm-6 control-label" style="display: none;" id="' + thisidLabel + '"></label>' +
            '<input id="' + thisid + '" name="' + thisid + '" type="file" required="required" data-show-caption="true">' +
            '<input type="button" value="-" class="ht_in_jian">' +
            '</div>');

            $(this).parents('.form-group').siblings(".box-footer").attr("style", "display:block");


        });
        $('.panel').on('click', '.ht_in_jian', function () {
            if($($(this).parents('.form-group')[1]).find('.form-group').length==1){
                $($(this).parents('.form-group')[1]).siblings(".box-footer").attr("style", "display:none");
            }
            $(this).parents('.form-group')[0].remove();
        });
    })
    function loadHref(s) {
        $.myAdmin.loadContent(s);
    }
    //更新证件图片
    function updateImage(uploadId) {
        $('#updateModal').modal('show')
        $('#upload_id').val(uploadId)
    }
    //修改按钮
    $("#editDetail_ID").click(function () {
        $("#detailG").find("input").removeAttr("readonly")
        $("#saveDetail_ID").show();
        $("#editDetail_ID").hide();
    })

    //保存按钮
    $("#saveDetail_ID").click(function () {
        var archivesId = $("#dormanyId").val();
        $.ajax({
            type: "post",
            url: '/company/editCompanyInfo',
            data: $('#detailG').serialize(),
            success: function (data) {
                $.myNotify.success(data.msg);
                loadHref('#dormant/dataUpload?id=' + archivesId + '')
            },
            error: function (data) {
                $.myNotify.danger(data.msg);
            }
        })
    })

    //企业修改按钮
    $("#editCompany_ID").click(function () {
        $("#detailCompany").find("input").removeAttr("readonly")
        $("#creditLimit_select").removeAttr("disabled")
        $("#saveCompany_ID").show();
        $("#editCompany_ID").hide();
    })

    //企业保存按钮
    $("#saveCompany_ID").click(function () {
        var archivesId = $("#dormanyId").val();
        $.ajax({
            type: "post",
            url: '/company/editCompanyInfo',
            data: $('#detailCompany').serialize(),
            success: function (data) {
                $.myNotify.success(data.msg);
                loadHref('#dormant/dataUpload?id=' + archivesId + '')
            },
            error: function (data) {
                $.myNotify.danger(data.msg);
            }
        })
    })


    $("#updateImage").click(function () {
        $("#submitImgAdd").attr("disabled", "disabled");
        var archivesId = $("#dormanyId").val();
        var formData = new FormData();
        var sizeTotal=0;
        var sizeFlag=true;
        $("#updateForm :input").each(function () {

            var type = $(this).attr("type");
            var name = $(this).attr("id");
            if (type == "file") {
                formData.append(name, $(this)[0].files[0]);
                sizeTotal=sizeTotal+$(this)[0].files[0].size;
            }
        });

        if(sizeTotal>200*1024*1024){
            sizeFlag=false;
            alert("文件需小于200M");
            return;
        }
        if(sizeFlag) {
            var that = this;
            var loadnum = 0;
            var oldloaded = 0;
            $.ajax({
                type: 'post',
                url: '/company/editCompanyUploadInfo?' + $('#updateForm').serialize(),
                cache: false,
                data: formData,
                contentType: false,
                processData: false,
                xhr: function () {
                    myXhr = $.ajaxSettings.xhr();
                    if (myXhr.upload) {
                        $(that).parents('.modal ').find('#J_progress_label').show();
                        myXhr.upload.addEventListener('progress', function (e) {
                            if (e.lengthComputable) {
                                if (e.loaded != 0) {
                                    loadnum += Math.abs(e.loaded - oldloaded);
                                    console.log(e.loaded, loadnum, e.total);
                                    oldloaded = e.loaded;
                                } else {
                                    oldloaded = 0;
                                }

                                var percent = Math.floor(loadnum / e.total * 100);
                                if (percent <= 100) {
                                    $(that).parents('.modal ').find("#J_progress_label").html('已上传：' + percent + '%');
                                }
                                if (percent >= 100) {
                                    $(that).parents('.modal ').find("#J_progress_label").html('文件上传完毕，请等待处理...');
                                }
                            }
                        }, false);
                    }
                    return myXhr;
                },
                success: function (data) {
                    $.myNotify.success(data.msg);
                    $("#updateModal").modal('hide');
                    //$.myAction.refreshContent();
                    loadHref('#dormant/dataUpload?id=' + archivesId + '')
                },
                error: function (data) {
                    $.myNotify.danger(data.msg);
                    $("#submitImgAdd").removeAttr("disabled");
                }
            })
        }
    })

    $(function () {
        $("#saveCompany_ID").hide();
        $("#saveDetail_ID").hide();
        $('input').attr("readonly", "readonly")
        $('#creditLimit_select').attr("disabled", "disabled")

        //点击图片放大
        $("#img-zoom").click(function () {
            $('#img-modal').modal("hide");
        });
        $("#img-dialog").click(function () {
            $('#img-modal').modal("hide");
        });
        //index-list-content为显示文章内容div的class
        $(".images img").each(function (i) {
            var src = $(this).attr("src");
            $(this).click(function () {
                $("#img-zoom").attr("src", src);
                var oImg = $(this);
                var img = new Image();
                img.src = $(oImg).attr("src");
                var realWidth = img.width;//真实的宽度
                var realHeight = img.height;//真实的高度
                var ww = $(window).width();//当前浏览器可视宽度
                var hh = $(window).height();//当前浏览器可视宽度
                $("#img-content").css({"top": 0, "left": 0, "height": "auto"});
                $("#img-zoom").css({"height": "auto"});
                if ((realWidth + 20) > ww) {
                    $("#img-content").css({"width": "100%"});
                    $("#img-zoom").css({"width": "99%"});
                } else {
                    $("#img-content").css({"width": realWidth + 20, "height": realHeight + 20});
                    $("#img-zoom").css({"width": realWidth, "height": realHeight});
                }
                if ((hh - realHeight - 40) > 0) {
                    $("#img-content").css({"top": (hh - realHeight - 40) / 2});
                }
                if ((ww - realWidth - 20) > 0) {
                    $("#img-content").css({"left": (ww - realWidth - 20) / 2});
                }
                $('#img-modal').modal();
            });
        });
    });
    function showhtfun(hturl) {
        window.open("/" + hturl);
    }
</script>